<template>  
  <div class="agreement-page">  
    <h1>注册协议</h1>  
    <hr class="gray-line" />  
    <br /><br />  
    <textarea v-model="agreementText" rows="10" cols="50" placeholder="请在此处填写注册协议内容..."></textarea>  
    <br />  
    <button @click="saveAgreement">保存</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      agreementText: ''  
    };  
  },  
  methods: {  
    saveAgreement() {  
      // 在这里处理保存注册协议的逻辑  
      // 例如，你可以将协议内容发送到服务器进行保存  
      console.log('注册协议内容:', this.agreementText);  
    }  
  }  
};  
</script>  
  
<style scoped>  
.agreement-page {  
  padding: 5px;  
}  
  
.gray-line {  
  border: none;  
  height: 1px;  
  background-color: #ccc;  
  margin-bottom: 20px;  
}  
  
textarea {  
  width: 100%;  
  resize: none;  
  padding: 10px;  
  border-radius: 5px;  
  border: 1px solid #ccc;  
}  
  
button {  
  padding: 10px 20px;  
  margin-top: 10px;  
  border-radius: 5px;  
  border: none;  
  background-color: #4CAF50;  
  color: white;  
  cursor: pointer;  
}  
</style>